<template>
    <div id="cache">
      <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper" style="touch-action: pan-y!important;">
       <!--编辑按钮-->
       <div v-show="$store.state.cache.length!==0" class="compile" @click="compileClick">
        <span v-show="!compile">编辑</span><span v-show="compile">完成</span>
      </div>

        <div v-if="$store.state.cache.length===0" class="not-login-img">
        <img src="../../../assets/imgs/bookrack/muyou.png" alt="">
      </div>

       <!--收藏的漫画-->
       <div class="collect-comic"  v-show="$store.state.cache.length!==0">
        <div  @click="detail(item)" class="comic-item" v-for="(item,index) in $store.state.cache" :key="index">
          <div class="img-bar">
            <img :src="item.imgUrl" alt="">
            <!--遮罩层-->
            <div class="comic-compile" v-show="compile" @click="item.check = !item.check">
              <img v-show="!item.check" src="../../../assets/imgs/bookrack/未选中.png" alt="">
              <img v-show="item.check" src="../../../assets/imgs/bookrack/选中.png" alt="">
            </div>
          </div>
          <p class="comic-name">{{item.name}}</p>
        </div>
      </div>
       <!--底部编辑按钮-->
        <div v-show="compile&&$store.state.cache.length!==0" class="compile-txt">
        <div @click="allCheckClick"><p v-show="!allcheck">全选</p><p v-show="allcheck">取消全选</p></div>
        <div @click="deletebtn" :class="{del:delState}">删除 <span v-show="isdelete"></span></div>
      </div>
      </v-touch>
    </div>

</template>

<script>
    export default {
        name: "Cache",
      data(){
        return{
          compile:false,
          allCheck:false,
          delState:false
        }
      },
      computed:{
        //删除按钮状态
        isdelete(){
          for (var i = 0; i < this.$store.state.cache.length; i++) {
            if(this.$store.state.cache[i].check){
              this.delState = true
              return
            }
          }
          this.delState = false
        },
        //全选状态
        allcheck(){
          for (var i = 0; i < this.$store.state.cache.length; i++) {
            if(this.$store.state.cache[i].check){
            }else{
              this.allCheck = false
              return false
            }
          }
          return true
        },
        //删除状态

      },
      activated(){
        //进入路由时，如果收藏有数据则给每个数据增加一个key值
        if(this.$store.state.cache.length==0){
          return
        }
        for (var i = 0; i < this.$store.state.cache.length; i++) {
          this.$set(this.$store.state.cache[i],'check',false)
        }
        // console.log(this.$store.state.cache);
      },
      deactivated(){
        this.compile = false
      },
      methods:{
        swiperleft: function () {
          this.$router.push({'path': '/profile'});
        },
        swiperright: function () {
          this.$router.push({'path': '/bookrack/history'});
        },
        //删除选中的漫画
        deletebtn(){
          this.$messagebox({
            title: '是否取消追漫?',
            message: '其他分组中的追漫也将一并取消',
            showCancelButton: true,
            confirmButtonText:"删除",
            confirmButtonClass:'confirmButton',
            cancelButtonText:"关闭"
          }).then(action => {

            if(action == 'confirm'){
              for (var i = 0; i < this.$store.state.cache.length; i++) {
                if(this.$store.state.cache[i].check){
                  this.$store.state.cache.splice(i,1)
                  // 使用splice方法删除会使后面的数据位置前进 1（删除的数量）
                  i = i-1
                }
              }
              this.compileClick()
            }else{

            }
          })
        },
        //跳转详情页
        detail(obj){
          if(this.compile){
            return
          }
          this.$router.push({name:'Detail',query:obj})
        },
        // 全选
        allCheckClick(){
          if(this.allCheck){
            for (var i = 0; i <this.$store.state.cache.length; i++) {
              this.$store.state.cache[i].check = false
            }
            this.allCheck = false
          }else{
            for (var i = 0; i <this.$store.state.cache.length; i++) {
              this.$store.state.cache[i].check = true
            }
            this.allCheck = true
          }
        },
        //点击完成或编辑 清除选中/进入编辑状态
        compileClick(){
          if(this.compile){
            for (var i = 0; i < this.$store.state.cache.length; i++) {
              this.$store.state.cache[i].check = false
            }
          }
          this.compile = !this.compile
        },
      },
    }
</script>

<style lang="less">
@import "../../../assets/css/bookrack/cache";
</style>
